<%--
  Created by IntelliJ IDEA.
  User: 28237
  Date: 2021/11/17
  Time: 15:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>数据统计</title>
<%--    <script type="text/javascript" src="../static/js/echarts.min.js"></script>--%>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script  type="text/javascript" src="../static/js/jquery-3.4.1.min.js"></script>
</head>

<body>
<div style="width:600px; float:left;">
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div style="width: 600px">
        <div id="main" style="width: 600px; height: 500px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        <%--var url = '${pageContext.request.contextPath}/admin/GetAllDataServlet';--%>
        // $.getJSON(url).done(function(json) {
        //     // 2.获取数据
        //     femaleCount = json.femaleCount;//女生数量
        //     maleCount = json.maleCount;//男生数量
            // 3.更新图表myChart的数据
            var option = {
                title: {
                    text: '用户性别比例表',
                    left:'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series:[
                    {
                        name:'性别比例',
                        type:'pie',
                        radius: '50%',
                        data:[
                            // {value:7, name:female},
                            // {value:10,name:male}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                    // {
                    //     name: '数量', // 系列名称
                    //     type: 'bar',        // 系列图表类型
                    //     data: counts         // 系列中的数据内容
                    // }
                ]
            };
            $.ajax({//发送请求
                type:'post',
                url:"/admin/GetAllDataServlet",
                dataType:'json',
                contentType:'application/json',
                // data:JSON.stringify(),
                success:function (datas) {
                       option.series[0].data.push({
                           name:"男",
                           value:datas.male
                       });
                       option.series[0].data.push({
                           name:"女",
                           value:datas.female
                       });
                    myChart.setOption(option);
                },
                error:function (datas) {
                    alert("出错了！！！"+datas);
                }
            });
           
            myChart.setOption(option);
        // });
    </script>
    </div>
</div>

<div style="width:600px;float:left;">
    <div  style="float:left;width:600px;">
        <div id="chart3" style="width:600px;height:500px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart3 = echarts.init(document.getElementById('chart3'));
            var places = [];
            var counts = [];
            // 指定图表的配置项和数据
                var option3 = {
                    title: {text: '用户地址分布图'},
                    //配置提示信息：
                    tooltip: {},
                    //图例组件
                    legend: {data: ['数量']},
                    xAxis: {
                        data: places,
                        // x轴文字倾斜
                        axisLabel: {
                            interval: 0,
                            rotate: -45,//倾斜度 -90 至 90 默认为0
                            margin: 2,
                            textStyle: {
                                //粗体
                                //fontWeight:"bolder",
                                color: "#000000"
                            }
                        }
                    },
                    yAxis: {},
                    //系列列表包含示例图、图表类型，数据

                    series: [{
                        name: '数量', // 系列名称
                        type: 'bar',        // 系列图表类型
                        data: counts         // 系列中的数据内容
                    }]
                };

                $.ajax({//发送请求
                    type:'post',
                    url:"/admin/GetAllDataServlet1",
                    dataType:'json',
                    contentType:'application/json',
                    success:function (datas) {
                        console.info(datas)
                        Object.keys(datas).forEach(function(key){

                            places.push(key);
                            counts.push(datas[key]);
                        });
                        option3.xAxis.data = places;
                        option3.series[0].data = counts;
                        myChart3.setOption(option3, true);
                    },
                    error:function (datas) {
                        alert("出错了！！！"+datas);
                    }
                });
                myChart3.setOption(option3, true);
            // })
        </script>
    </div>
</div>

</body>
</html>
